<template>
	<view>
		<!-- 商品列表图片 -->
		<view class="goods-item">
			<view class="right">
				<radio :checked="item.goods_state" color="#c00000" v-show="showRadio" @click="handleChange"></radio>
				<image :src="item.goods_small_logo || defaultImg" mode="aspectFill"></image>
			</view>
			<view class="left">
				<view class="text">
					<text>{{item.goods_name}}</text>
				</view>
				<!-- 商品列表价格 -->
				<view class="price">
					<text>￥{{item.goods_price | tofixed}}</text>
					<!-- 封装number-box组件 -->
					<uni-number-box :min="1" :value="item.goods_count" v-if="showNumber" @change="numChange"></uni-number-box>
				</view>
			</view>
			<!-- 商品列表文本 -->
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
				defaul:{}
			},
			showRadio:{
				type:Boolean,
				default:false
			},
			showNumber:{
				type:Boolean,
				default:false
			}
		},
		name:"my-goods",
		data() {
			return {
				// 默认图片
				defaultImg: 'https://alextachalova.com/wp-content/themes/wp-wellow/assets/images/no-image.jpg'
			};
		},
		filters:{
			tofixed(num){
				return Number(num).toFixed(2)
			}
		},
		methods: {
			handleChange() {
				this.$emit('radio-change',{
					goods_id: this.item.goods_id,
					goods_state: !this.item.goods_state
				})
			},
			numChange(val){
				// console.log(val)
				this.$emit('num-change',{
					goods_id: this.item.goods_id,
					goods_count: +val
				})
			}
		}
	}
</script>

<style lang="scss">
 .goods-item{
 		 display: flex;
 		 flex-direction: row;
 		 width: 100%;
 		 border: 1px solid #efefef;
 		 margin: 10px;	
 }
 .right{
	 display: flex;
	 flex-direction: row;
	 align-items: center;
 }
 image{
 	 width: 200rpx;
 	 height: 200rpx;
 }
 .left{
    display: flex;
	flex: 1;
 	flex-direction: column;
 	justify-content: space-between;
 	.price{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
 	  text{
 		  color:#c00000;
 	  }
 	}
 }
 text{
 	 font-size: 15px;
 }
 
</style>